<template>
	<div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners"></div>
	<i v-else-if="isElIcon" :class="iconClass" :style="istyle" v-on="$listeners"></i>
	<i v-else-if="isFaIcon" :class="iconClass" :style="istyle" v-on="$listeners"></i>
	<svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
		<use :href="iconName"></use>
	</svg>
</template>

<script>
	// doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
	import { isExternal } from '/vue/utils/validate.js'

	module.exports = {
		name: 'SvgIcon',
		props: {
			iconClass: {
				type: String,
				required: true
			},
			className: {
				type: String,
				default: ''
			},
			istyle: {
				type: Object,
				default: { }
			}
		},
		computed: {
			isExternal() {
				return isExternal(this.iconClass)
			},
			isElIcon() {
				return this.iconClass.indexOf("el-icon") === 0
			},
			isFaIcon() {
				return this.iconClass.indexOf("fa") === 0
			},
			iconName() {
				return `#icon-${this.iconClass}`
			},
			svgClass() {
				if (this.className) {
					return 'svg-icon ' + this.className
				} else {
					return 'svg-icon'
				}
			},
			styleExternalIcon() {
				return {
					mask: `url(${this.iconClass}) no-repeat 50% 50%`,
					'-webkit-mask': `url(${this.iconClass}) no-repeat 50% 50%`
				}
			}
		}
	}
</script>

<style scoped>
	.svg-icon {
		width: 1em;
		height: 1em;
		vertical-align: -0.15em;
		fill: currentColor;
		overflow: hidden;
	}

	.svg-external-icon {
		background-color: currentColor;
		mask-size: cover !important;
		display: inline-block;
	}
</style>
